/* eslint-disable react-hooks/exhaustive-deps */
import React, { useEffect, useState } from 'react'
import { SearchBar, Image, InfiniteScroll, Dropdown } from 'antd-mobile'
import { getList } from "../../api"
import { useNavigate } from 'react-router'
import { connect } from 'react-redux'
import actions from "../../store/actions"
import "./style.scss"
import { sleep } from 'antd-mobile/es/utils/sleep'

interface respType {
    code?: number,
    data?:any[],
    total?: number
}


function Index(prop:any) {
    const {list,dispatch}=prop
    const navigate = useNavigate()
    const [flag, setFlag] = useState(true)
    const [page, setPage] = useState(1)
    const [hasMore, setHasMore]: any = useState(true)
    const [keys, setKeys] = useState('cityType')
    const [ind, setInd] = useState(1)
    const typeBar = [
        {
            title: '位置',
            type: ['青浦', '奉贤', '松江', '虹口', '普通', '徐汇', '长宁', '静安', '普陀', '闵行'],
            keys: 'cityType'
        }, {
            title: '户型',
            type: ['一居室', '二居室', '三居室'],
            keys: 'doormodel'
        }, {
            title: '整租',
            type: ['整租', '合租'],
            keys: 'intType'
        }, {
            title: '价格',
            type: ['500-1000', '1000-1500', '1500-2000', '2000-5000', '5000-10000'],
            keys: 'price'
        }
    ]
    const goBack = () => {
        navigate('/main')
    }
    const getAndSet = async () => {
        const resp:respType = await getList({ page: page, keys: keys, ind: ind })
        const action =actions.getList(resp.data)
        dispatch(action)
        if (resp.total === resp.data?.length) {
            setHasMore(false)
        }
        setFlag(true)
    }
    const loadMore = async () => {
        if (flag) {
            setFlag(false)
            await setPage(page + 1)
            await getAndSet()
        }
    }
    useEffect(() => {
        getAndSet()
    }, [ind])
    const screening: any = (keys: string, ind: any) => {
        console.log(keys, ind)
        setKeys(keys)
        setInd(ind)
    }

    return (
        <div className='listWrap'>
            <header>
                <span onClick={goBack}>返回</span>
                <span>上海</span>
                <SearchBar placeholder='请输入内容' />
                <span>👨🏻</span>
            </header>
            <main>
                <Dropdown className='spaceWrap'>
                    {
                        typeBar.map((v, i) => {
                            return (
                                <Dropdown.Item key={v.keys} title={v.title} closeOnContentClick >
                                    {
                                        v.type.map((item: any, ind: any) => {
                                            return (
                                                <span onClick={() => screening(v.keys, ind)} key={ind}>
                                                    {item}
                                                </span>
                                            )
                                        })
                                    }
                                </Dropdown.Item>
                            )
                        })
                    }
                </Dropdown>
                <div className="lists">
                    {
                        list.map((v: any, i: any) => {
                            return (
                                <dl key={i}>
                                    <dt><Image lazy src={v.url} alt="" /></dt>
                                    <dd>
                                        <p>{v.title}</p>
                                        <p>{v.desc}</p>
                                        <p>￥{v.price}</p>
                                    </dd>
                                </dl>
                            )
                        })

                    }{
                        list && list.length && <InfiniteScroll loadMore={() => loadMore()} hasMore={hasMore} />
                    }
                </div>
            </main>
        </div>
    )
}
const mapStateToProps = (state:any) =>{
    return{
        ...state
    }
}

const mapDispatchToProps =(dispatch:any)=> {
    return{
        dispatch
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Index)



